<template>
  <div class="img">
    <div>
        <img :src="arrImg" alt="">
    </div>
    <div>
        <img :src="arrImg2" alt="">
        <p>扫码关注【雁甲】公众号</p>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, ref } from 'vue'
const { proxy } = getCurrentInstance()
const arrImg = ref(null)
const arrImg2 = ref(null)
proxy.$http.get('https://yami.h5.yscase.com/yanjia/global/setting').then(val => {
  console.log(val.data)
  arrImg.value = val.data.data[1].image
  arrImg2.value = val.data.data[6].image
  console.log(arrImg2.value)
})
</script>
<style lang="less" scoped>
* {
    padding: 0;
    margin: 0;
}
.img {
    display: flex;
    padding: 75px 330px 105px;
    justify-content: space-between;
    align-items: center;
    background-color: #f4f4f4;
    >div {
        img {
            display: block;
        }
        &:nth-child(1) {
            margin-left: 170px;
            img {
                width: 403px;
                height: auto;
            }
        }
        &:nth-child(2) {
            width: 219px;
            position: relative;
            // margin-left: 250px;
            margin-right: 220px;
            // height: 219px;
            img {
                width: 100%;
                height: 219px;
            }
            p {
                font-size: 18px;
                color: #434343;
                margin-top: 20px;
            }
            ::after {
                position: absolute;
                content: "";
                width: 1px;
                height: 334px;
                background-color: #d4d4d4;
                top: -35px;
                left: -136px;
            }
        }
    }
}
</style>
